<template>
	<view>
		<view class="brand">
			<uni-forms ref="form" :modelValue="formData" :rules="bandRules" :label-width="80">
				<uni-forms-item label="商品照片" required>
					<uni-file-picker v-model="formData.thum" fileMediatype="image" mode="grid" :limit="3" />
				</uni-forms-item>
				<uni-forms-item name="name" label="商品名称" required>
					<uni-easyinput v-model="formData.name" placeholder="请输入商品名称" trim="both"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="categories" label="商品分类" required>
					<view class="flex aic">
						<uni-data-select v-model="formData.categories" trim="both" :localdata="crList"></uni-data-select>
						<navigator url="/pages_main/index/creategoxy">
							<u-icon name="plus-circle" size="20" class="mgl20"></u-icon>
						</navigator>
					</view>
				</uni-forms-item>
				<uni-forms-item name="shopStyle" label="商品规格">
					<u-cell title="请选择规格" isLink @click="selectOpen" v-if="!formData.shopStyle" style="font-size: 24px"></u-cell>
					<view class="ucell" v-for="i in formData.shopStyle" v-else @click="selectOpen">
						<view class="flex">
							<view class="mgr20">
								<u-tag :text="i.skuName" plain></u-tag>
							</view>
							<view v-for="item in i.child" class="mgr10">
								<u-tag :text="item.name" type="error" plain></u-tag>
							</view>
						</view>
					</view>
				</uni-forms-item>
				<!-- <uni-forms-item name="money" label="商品价格" required>
					<uni-easyinput v-model="formData.money" placeholder="请输入商品价格" type="number" trim="both"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="deMoney" label="划线价格">
					<uni-easyinput v-model="formData.deMoney" placeholder="折前原价" type="number" trim="both"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="stock" label="商品数量" required>
					<uni-easyinput v-model="formData.stock" placeholder="商品数量" type="number" trim="both"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item name="dsc" label="商品介绍">
					<uni-easyinput v-model="formData.dsc" placeholder="请输入商品介绍" type="textarea"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="isHot" label="是否热门" class="flex aic">
					<u-switch v-model="formData.isHot"></u-switch>
				</uni-forms-item>
				<u-button type="primary" text="提交" @click="submit"></u-button>
			</uni-forms>
		</view>
		<!-- 商品属性 -->
		<u-popup :show="selectCk" mode="bottom" @close="selectCk = false" round="20">
			<view class="bottomPopup">
				<view class="top">
					<text>商品属性</text>
					<view class="flex" @click="open()">
						<u-icon name="plus" color="#999" size="18"></u-icon>
						<text>添加属性</text>
					</view>
				</view>
				<view class="main">
					<view v-for="(i, index) in skuList" class="mgt40" :key="index">
						<view class="flex aic">
							<checkbox :checked="i.checked" @click="skuList[index].checked = !skuList[index].checked"></checkbox>
							<text class="mgl8">{{ i.skuName }}</text>
							<view class="mgl20" @click="open(index)"><u-icon name="plus" color="#999" size="18"></u-icon></view>
						</view>
						<view class="tagGroup" v-if="i.checked">
							<view v-for="(item, chIdx) in i.child" class="tag" :key="chIdx" @click="tagActive(index, chIdx)" :class="item.checked ? 'active' : ''">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="flex jcc">
					<view class="qickButton">
						<u-button type="primary" text="提交" @click="qickSize"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 商品属性编辑 -->
		<uni-popup ref="inputLoading" type="dialog" style="z-index: 100000">
			<view class="skuEdit"></view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, useAttrs } from 'vue';
import { getImg } from '../../utils/tools.js';
import { onShow } from '@dcloudio/uni-app';
let formData = ref({
	name: '',
	dsc: '',
	thum: [],
	categories: null,
	isHot: false
});
// 规则
const bandRules = {
	name: {
		rules: [
			{
				required: true,
				errorMessage: '请填写品牌名称'
			},
			{
				minLength: 2,
				maxLength: 10,
				errorMessage: '名字长度在 {minLength} 到 {maxLength} 个字符'
			}
		]
	},
	categories: {
		rules: [
			{
				required: true,
				errorMessage: '请选择分类'
			}
		]
	},
	money: {
		rules: [
			{
				required: true,
				errorMessage: '请输入商品价格'
			}
		]
	}
};
const form = ref();
const goodObj = uniCloud.importObject('mall-goods');
const submit = () => {
	let tip = '';
	form.value.validate().then(async () => {
		let data = formData.value;
		data.thum = getImg(formData.value);
		if (id) {
			await goodObj.updateEdit(id, data);
			tip = '修改成功';
		} else {
			let res = await goodObj.add(data);
			console.log(res);
			tip = '新增成功';
		}
	});
	uni.showToast({
		icon: 'none',
		title: tip
	});
	setTimeout(() => {
		uni.navigateBack();
	}, 1000);
};
//规格弹窗
const selectCk = ref(false);
function selectOpen() {
	selectCk.value = true;
	if (formData.value.shopStyle) {
		arrSelect(Object.values(skuList), Object.values(formData.value.shopStyle), 'skuName');
	}
}
function arrSelect(arr1, arr2, key) {
	arr1.forEach((i) => {
		arr2.forEach((item) => {
			if (i[key] == item[key]) {
				i.checked = true;
				if (item?.child?.length) {
					arrSelect(i.child, item.child, 'name');
				}
			}
		});
	});
}
//规格列表
let skuList = reactive([]);
//点击规格
const tagActive = (index, idx) => {
	skuList[index].child[idx].checked = !skuList[index].child[idx].checked;
};
//编辑属性弹框
const inputLoading = ref();
//打开
const editIdx = ref();
const open = (index = null) => {
	if (index != null) {
		editIdx.value = index;
	} else {
		editIdx.value = null;
	}
	inputLoading.value.open();
};
//输入
const inputValue = ref();
const dataObj = uniCloud.importObject('mall-sku');
const edit = async (e) => {
	if (editIdx.value != null) {
		let childData = {
			name: e,
			checked: false
		};
		await dataObj.updateChild(skuList[editIdx.value]._id, childData);
		skuList[editIdx.value].child.push(childData);
	} else {
		let addData = {
			skuName: e,
			checked: false,
			child: []
		};
		let res = await dataObj.add(addData);
		addData._id = res.id;
		console.log(res);
		skuList.push(addData);
	}
	inputValue.value = '';
};

//获取分类
const crList = ref([]);
const categoriesObj = uniCloud.importObject('mall-categories');
const getCategories = async () => {
	let res = await categoriesObj.get();
	if (res.data) {
		crList.value = res.data;
	}
};
//获取sku数据
const getSku = async () => {
	let res = await dataObj.get();
	if (res.data) skuList.push(...res.data);
};

//提交商品属性
const qickSize = () => {
	formData.value.shopStyle = skuList
		.filter((i) => i.checked && i.child.some((item) => item.checked))
		.map((item) => {
			return {
				child: [...item.child.filter((child) => child.checked)],
				skuName: item.skuName
			};
		});
	formData.value.shopStyle.map((i) => {
		return {
			skuName: i.skuName,
			child: i.child
		};
	});
	selectCk.value = false;
};

//获取数据
const id = useAttrs().id;
const getData = async () => {
	if (id) {
		let res = await goodObj.getEditMsg(id);
		formData.value = res.data[0];
	}
};
onMounted(() => {
	getData();
	getSku();
});
onShow(() => {
	getCategories();
});
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.ucell {
	padding: 18rpx;
}
::v-deep .u-cell__title-text {
	font-size: 24rpx;
	color: #999;
	transition: 0.4s;
}
.brand {
	padding: 20rpx;
}
.bottomPopup {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	box-sizing: border-box;

	.top {
		@include flex-box();
		padding: 20rpx 0;
		border-bottom: 1px solid #eee;
	}
	.main {
		margin: 20rpx 0;
		.tagGroup {
			@include flex-box-set(start);
			flex-wrap: wrap;
			.tag {
				@include flex-box-set();
				padding: 10rpx 15rpx;
				margin: 20rpx 15rpx 0 0;
				border-radius: 10rpx;
				box-sizing: border-box;
				border: 1px solid #eee;
				&.active {
					border: 1px solid rgba(236, 87, 79);
					background: rgba(236, 87, 79, 0.1);
					color: rgba(236, 87, 79);
				}
			}
		}
	}
	.qickButton {
		margin: 40rpx 0;
		width: 230rpx;
	}
}
</style>
